<!-- 我的收藏课程 -->

<template>
  <div class="list-box my-scrollbar">
    <content-cards
      v-for="(item, index) in dataSetList"
      :key="index"
      :data="item"
      :card-width="387"
      @on-click="handleClickCard(item)"
      @okCancel="refreshDataList"
    />
  </div>
  <my-infinite-loading :empty="dataSetList?.length === 0" :identifier="identifier" img-margin-top="88px" @infinite="loadData" />
</template>

<script lang="ts" setup>
  import { ref } from 'vue'

  import ContentCards, { ClassSquareCardData } from '@/components/ClassSquareCard/index.vue'
  import { collectionApi } from '@/services/api'

  import { ProPageForm } from '../../types'

  const pageForm = ref<ProPageForm>({
    columns: 'createTime',
    order: 'desc',
    offset: 1,
    limit: 12
  })
  const identifier = ref<number>(1)
  const dataSetList = ref<ClassSquareCardData[]>([])

  const loadData = async ($state: any) => {
    try {
      const {
        data: { records }
      } = await collectionApi.courseFavorite(pageForm.value)

      if (records.length < pageForm.value.limit) {
        $state.complete()
      } else {
        pageForm.value.offset++
        $state.loaded()
      }
      dataSetList.value.push(...records)
    } catch (error) {
      $state.error()
    }
  }

  /*----------------------------------------- 详情 --------------------------------*/
  const handleClickCard = (item: any) => {
    console.log('item', item)
    window.open(`/class-square/class-particulars/${item.objectId ? item.objectId : item.id}`, '_blank')
  }

  // 刷新
  const refreshDataList = () => {
    pageForm.value.offset = 1
    dataSetList.value = []
    identifier.value = Date.now()
  }
</script>

<style lang="less" scoped>
  .list-box {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    grid-gap: 20px;
  }
</style>
